<template>
  <view class="van-tabs">
    <scroll-view scroll-x>
      <uni-segmented-control
          :class="['uni-segmented-' + items.length]"
          :current="currentIndex"
          :values="items"
          :style-type="styleType"
          :active-color="activeColor"
          @clickItem="onClickItem"
      />
    </scroll-view>
    <view :class="['van-tab-body', 'active-' + currentIndex]" v-if="items.length">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, computed, useSlots } from 'vue';

const slots = useSlots()
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: 1
  },
  activeColor: {
    type: String,
    default: 'var(--color)'
  },
  styleType: {
    type: String,
    default: 'text'
  }
});

const emit = defineEmits(['update:modelValue', 'click']);

const currentIndex = ref(props.modelValue);
const list = ref([]);

watch(() => props.modelValue, (val) => {
  setIndex();
});

const items = computed(() => {
    if (!slots.default()[0].props) {
      // 父组件的slot 是v-for的
      list.value = slots.default()[0]?.children.map((e, i) => {
        return {
          title: e.props.title,
          name: typeof e.props.name === 'string' ||
          typeof e.props.name === 'number' ? e.props.name : i
        };
      });
    }else {
      list.value = slots.default().filter(e=>!!e.props).map((e, i) => {
        console.log(`=>(van-tabs.vue:63) e.props.title`, e.props.title);
        return {
          title: e.props.title,
          name: (typeof e.props.name === 'string' || typeof e.props.name === 'number') ? e.props.name : i
        };
      });
    }

  setIndex();
  return list.value.map(e => e.title);
});

function setIndex() {
  currentIndex.value = list.value.findIndex(e => e.name === props.modelValue);
}

function onClickItem({ currentIndex }) {
  emit('update:modelValue', list.value[currentIndex].name);
  emit('click', list.value[currentIndex].name, list.value[currentIndex]);
}
</script>

<style lang="scss" scoped>
    .segmented-control {
		height: 40px;
		border-bottom: 1px solid #ddd;
		overflow-y: hidden;
		overflow-x: auto;
      :deep(.segmented-control__item--text) {
			border-bottom-width: 4px;
		}
		&.uni-segmented-1{
      :deep(.segmented-control__item) {
				padding: 0 20px;
				flex: inherit;
			}
		}
      :deep(.segmented-control__item){
			min-width: fit-content;
			padding: 0 10px;
		}
    }
	.van-tab-body{
    :deep(.van-tab) {
			display: none;
		}
		&.active-0{
      :deep(.van-tab:nth-child(1)){
				display: block;
			}
		}
		&.active-1{
			:deep( .van-tab:nth-child(2)){
				display: block;
			}
		}
		&.active-2{
			:deep(.van-tab:nth-child(3)){
				display: block;
			}
		}
		&.active-3{
			:deep(.van-tab:nth-child(4)){
				display: block;
			}
		}
		&.active-4{
			:deep(.van-tab:nth-child(5)){
				display: block;
			}
		}
		&.active-5{
			:deep(.van-tab:nth-child(6)){
				display: block;
			}
		}
		&.active-6{
			:deep(.van-tab:nth-child(7)){
				display: block;
			}
		}
		&.active-7{
			:deep(.van-tab:nth-child(8)){
				display: block;
			}
		}
		&.active-8{
			:deep(.van-tab:nth-child(9)){
				display: block;
			}
		}
		&.active-9{
      :deep(.van-tab:nth-child(10)){
				display: block;
			}
		}
	}
</style>